<template>
  <a-modal
    v-model:open="visible"
    :title="props.isEdit ? '编辑价差规则' : '新增价差规则'"
    @ok="handleOk"
    destroyOnClose
    :width="450"
    @cancel="handleCancel"
    centered
  >
    <a-form
      :model="form"
      :rules="rules"
      ref="formRef"
      :labelCol="{
        style: {
          width: '140px',
        },
      }"
    >
      <a-form-item label="省份" name="provId">
        <a-select
          v-model:value="form.provId"
          placeholder="请选择"
          class="formInput"
          show-search
          optionFilterProp="label"
          allow-clear
        >
          <a-select-option
            v-for="item in provinceList"
            :key="item.provId"
            :value="item.provId"
            :label="item.provName"
          >
            {{ item.provName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="第一次充放价差" name="firstChargePriceDiff">
        <a-input-number
          v-model:value="form.firstChargePriceDiff"
          placeholder="请输入"
          class="formInput"
          :controls="false"
          addon-after="元"
        />
      </a-form-item>
      <a-form-item label="第二次充放价差" name="secondChargePriceDiff">
        <a-input-number
          v-model:value="form.secondChargePriceDiff"
          placeholder="请输入"
          class="formInput"
          :controls="false"
          addon-after="元"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>


const $api = inject("$api")
const props = defineProps({
  addPriceDifferVisible: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {},
  },
})
const visible = ref(props.addPriceDifferVisible)
watch(
  () => props.addPriceDifferVisible,
  (val) => {
    visible.value = val
    if (val) {
      if (val && props.isEdit) {
        form.value = {
          id: props.rowData.id,
          provId: props.rowData.provId,
          firstChargePriceDiff: props.rowData.firstChargePriceDiff,
          secondChargePriceDiff: props.rowData.secondChargePriceDiff,
        }
      } else {
        form.value = {
          provId: null,
          firstChargePriceDiff: null,
          secondChargePriceDiff: null,
        }
      }
    }
  }
)

const emit = defineEmits(["update:addPriceDifferVisible", "success"])

const formRef = ref(null)
const form = ref({
  provId: null,
  firstChargePriceDiff: null,
  secondChargePriceDiff: null,
})

const rules = {
  provId: [{ required: true, message: "请选择省份" }],
  firstChargePriceDiff: [{ required: true, message: "请输入第一次充放价差" }],
  secondChargePriceDiff: [{ required: true, message: "请输入第二次充放价差" }],
}

const provinceList = ref([])
const getProvinceList = async () => {
  let res = await $api.baseProvinceTree()
  if (res && res.code === 0) {
    provinceList.value = res.data
  }
}
const handleOk = async () => {
  try {
    await formRef.value.validate()
    emit("success", form.value)
    handleCancel()
  } catch (error) {
    console.error("表单验证失败", error)
  }
}

const handleCancel = () => {
  formRef.value?.resetFields()
  emit("update:addPriceDifferVisible", false)
}
onMounted(() => {
  getProvinceList()
})
</script>

<style scoped>
.formInput {
  width: 100%;
}
</style>
